<!--  -->
<template>
  <div class="box">

    <div class="all">
      <div class="main_box main_box1">
        <div id="main1"></div>
      </div>
      <!-- <div class="main_box">
        <div id="main2" style="padding: 0"></div>
      </div> -->
      <div class="main_box">
        <div id="main3"></div>
      </div>
      <div class="main_box">
        <div id="main4"></div>
      </div>
    </div>

  </div>

</template>
<script >

import axios from 'axios';
axios.defaults.baseURL = '/api/'
import * as echarts from 'echarts';
var today = new Date();
var todayYear = today.getFullYear();
var todayMonth = today.getMonth() + 1;
var app1 = {};
const posList = [
  'left',
  'right',
  'top',
  'bottom',
  'inside',
  'insideTop',
  'insideLeft',
  'insideRight',
  'insideBottom',
  'insideTopLeft',
  'insideTopRight',
  'insideBottomLeft',
  'insideBottomRight'
];
app1.configParameters = {
  rotate: {
    min: -90,
    max: 90
  },
  align: {
    options: {
      left: 'left',
      center: 'center',
      right: 'right'
    }
  },
  verticalAlign: {
    options: {
      top: 'top',
      middle: 'middle',
      bottom: 'bottom'
    }
  },
  position: {
    options: posList.reduce(function (map, pos) {
      map[pos] = pos;
      return map;
    }, {})
  },
  distance: {
    min: 0,
    max: 100
  }
};
app1.config = {
  rotate: 0,
  align: 'center',
  verticalAlign: 'middle',
  position: 'top',
  distance: 10,
  onChange: function () {
    const labelOption = {
      rotate: app1.config.rotate,
      align: app1.config.align,
      verticalAlign: app1.config.verticalAlign,
      position: app1.config.position,
      distance: app1.config.distance
    };
    myChart.setOption({
      series: [
        {
          label: labelOption
        },
        {
          label: labelOption
        },
        {
          label: labelOption
        },
        {
          label: labelOption
        }
      ]
    });
  }
};
const labelOption = {
  show: true,
  position: app1.config.position,
  distance: app1.config.distance,
  align: app1.config.align,
  verticalAlign: app1.config.verticalAlign,
  rotate: app1.config.rotate,
  formatter: '{c}',
  fontSize: 14
};
const itemStyleOption = {
  borderRadius: [4, 4, 0, 0]
};

function getFiveMonth(todayYear, todayMonth) {
  var list = [];
  for (let i = 0; i < 6; i++) {
    if (todayMonth <= 0) {
      todayMonth = (12 + todayMonth);
      todayYear -= 1;
    }
    list.unshift(todayYear + "年" + todayMonth + "月");
    todayMonth -= 1;
  }
  return list;
}


export default {
  data() {
    return {
      vipNumber: 0,
      generalNumber: 0,
      fruitNumList: [],
      salesList: []
    }

  },
  props: [],
  components: {},
  created() {


  },
  mounted() {
    this.SalesStatistics();

    this.PersonnelDistribution();

    this.FruitClass();

  },
  methods: {


    SalesStatistics() {
      axios({
        method: 'GET',
        url: '/order/getSixMonthSales',
        params:{
          year: todayYear,
          month: todayMonth
        }
      }).then((res) => {
        this.salesList = res.data;
        this.myChart1();
      })
    },

    PersonnelDistribution() {
      axios({
        method: 'GET',
        url: '/admin/getUserNumber'
      }).then((res) => {
        this.vipNumber = res.data[1];
        this.generalNumber = res.data[0];
        this.myChart3();
      })
    },

    FruitClass() {
      axios({
        method: 'GET',
        url: '/fruit/getSixFruitClass'
      }).then((res) => {
        this.fruitNumList = res.data;
        // this.fruitNumList = res.data;
        this.myChart4();
      })




    },

    myChart1() {
      // var myChart1 = echarts.init(document.getElementById('main1'), 'dark');
      var myChart1 = echarts.init(document.getElementById('main1'));

      var option1;

      window.onresize = function () {
        myChart1.resize();
      };



      option1 = {
        title: {
          text: '销量统计',
          left: 'center',
          top: 5
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        toolbox: {
          right: '20px',
          top: 5,
          feature: {
            mark: { show: true },
            // dataView: {show: true, readOnly: false},
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        grid: {
          bottom: '3%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            name: "时间/(月)",
            nameTextStyle: {
              fontSize: 14
            },
            boundaryGap: true,
            data: getFiveMonth(todayYear, todayMonth)
            // data: [2018,2019,2020,2021,2022]
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: "销售额/(元)",
            nameTextStyle: {
              fontSize: 14
            },
          }
        ],
        series: [
          {
            name: '销售额',
            type: 'line',
            stack: 'Total',
            // areaStyle: {},
            label: labelOption,
            smooth: true,
            emphasis: {
              focus: 'series'
            },
            itemStyle: {
              borderRadius: [10, 10, 0, 0]
            },
            // data: [23, 22, 27, 19, 28, 30]
            data: this.salesList
          }
        ]
      };

      option1 && myChart1.setOption(option1);
    },

    myChart3() {

      // var myChart3 = echarts.init(document.getElementById('main3'), 'dark');
      var myChart3 = echarts.init(document.getElementById('main3'));
      var option3;

      window.onresize = function () {
        myChart3.resize();
      };

      option3 = {
        title: {
          text: '人员情况',
          // subtext: '年级分布',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c} 人 ({d}%)'
        },
        legend: {
          bottom: 10,
          left: 'center',
          data: ['会员', '普通用户'],
        },
        series: [{
          type: 'pie',
          radius: '65%',
          center: ['50%', '50%'],
          selectedMode: 'single',
          data: [{

            value: this.vipNumber,
            name: '会员'
          }, {
            value: this.generalNumber,
            name: '普通用户'
          }],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]

      };

      option3 && myChart3.setOption(option3);
    },

    myChart4() {
      // var myChart4 = echarts.init(document.getElementById('main4'), 'dark');
      var myChart4 = echarts.init(document.getElementById('main4'));
      var option4;

      window.onresize = function () {
        myChart4.resize();
      };



      option4 = {
        title: {
          text: '类别分布',
          left: 'center',
          top: 5
        },
        legend: {
          bottom: '10',
          textStyle: {
            fontSize: 12
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c} 种 ({d}%)'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '65%'],
            selectedMode: 'single',
            avoidLabelOverlap: true,
            itemStyle: {
              borderRadius: 10,
              // borderColor: '#100c2a',
              borderColor: '#fff',
              borderWidth: 2
            },
            data: [
              { value: this.fruitNumList[0], name: '瓜果类' },
              { value: this.fruitNumList[1], name: '浆果类' },
              { value: this.fruitNumList[2], name: '坚果类' },
              { value: this.fruitNumList[3], name: '柑橘类' },
              { value: this.fruitNumList[4], name: '核果类' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };

      option4 && myChart4.setOption(option4);
    }
  }
};
</script>
<style>
.box {
  height: 100vh;
}

.all {
  max-width: 2000px;
  min-width: 900px;
  min-height: 600px;
  max-height: 1000px;
  margin: 0 auto;
  width: 90%;
  height: 95%;
  padding-top: 7px;
}

.main_box {
  width: 48%;
  height: 48%;
  float: left;
  box-shadow: 5px 5px 10px #dddddd;
  border-radius: 10px;
  border: 1px solid #eeeeee;
  margin: 5px;
  overflow: hidden;
}

.main_box1 {
  width: 97%;
}

.main_box>div {
  width: 100%;
  height: 100%;
}
</style>